<script setup lang="ts" name="consult-dep">
import { ref, onMounted, computed } from 'vue'
import { getAllDep } from "@/services/consult"
import type { TopDep, SubDep } from '@/types/consult'
import { useConsultStore } from '@/stores'
const loading = ref(false)
// 定义侧边栏绑定值
const active = ref(0)
// 定义数据源
const dataList = ref<TopDep[]>([])
// DOM 渲染时调用获取科室数据
onMounted(async() => {
  loading.value = true
  const res = await getAllDep()
  dataList.value = res.data
  loading.value = false
})
// 获取二级科室
const subList = computed<SubDep[]>(() => {
  if(!dataList.value.length) return []
  return dataList.value[active.value].child
})
// 保存科室 id
const store = useConsultStore()
const saveDepId = (id: string) => {
  store.setDepId(id)
}
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <van-loading v-if="loading" style="margin-top: 40vh;" vertical type="circular" size="40px" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="i in dataList" :key="i.id" :title="i.name" />
      </van-sidebar>
      <div class="sub-dep">
        <router-link v-for="item in subList" :key="item.id" to="/consult/illness" @click="saveDepId(item.id)">
          {{ item.name }}
        </router-link>
      </div>
    </div>
  </div>
  </template>

<style lang="scss" scoped>
.van-sidebar {
  width: 120px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    font-size: 12px;
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
.consult-dep-page {
  padding-top: 46px;
  font-size: 12px;
  .wrapper {
  height: calc(100vh - 46px);
  overflow: hidden;
  display: flex;
  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}

}
</style>
